<template>
  <div class="params">
    <el-alert title="只允许为三级分类设置属性！！！" type="success" />
    <p>
      选择分类：
      <el-cascader
        v-model="addForm.goods_cat"
        :options="options"
        @change="handleChange"
        :props="props"
      />
    </p>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="first">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            v-for="item in Classparams"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
            <template v-if="item.prop === 'action'">
              <el-button type="primary" :icon="Edit" size="small">
                编辑
              </el-button>
              <el-button type="danger" :icon="Delete" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="second"
        ><el-table :data="StaticData" style="width: 100%">
          <el-table-column
            v-for="item in Classparams"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
            <template v-if="item.prop === 'action'">
              <el-button type="primary" :icon="Edit" size="small">
                编辑
              </el-button>
              <el-button type="danger" :icon="Delete" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table></el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { Classparams } from "@/utils/userTable";
import { ref } from "vue";
import { Delete, Edit } from "@element-plus/icons-vue";
import type { TabsPaneContext } from "element-plus";
import apis from "@/http/apis";

let tableData = ref([]); //动态属性
let StaticData = ref([]); //静态属性
//级联选择器配置对象
const props = {
  label: "cat_name", //显示
  value: "cat_id", //选中值
  children: "children", //子节点
};

//添加商品的表单数据对象
let addForm = {
  goods_name: "",
  goods_price: 0,
  goods_number: 0,
  goods_weight: 0,
  goods_cat: [], //商品所属分类数组
};

//获取动态参数列表
const getMove = async () => {
  const res: any = await apis.getParamslist({
    id: addForm.goods_cat[2],
    sel: "many",
  });
  tableData.value = res.data;
};
//获取动态参数列表
const getStic = async () => {
  const res: any = await apis.getParamslist({
    id: addForm.goods_cat[2],
    sel: "only",
  });
  StaticData.value = res.data;
};
//级联选择器列表
let options = ref([]);
const getGoodsClass = async () => {
  const res: any = await apis.getClassifylist({});
  options.value = res.data;
};
getGoodsClass();

//级联选择器选中项变化处理函数
const handleChange = (value: any) => {
  getMove();
  getStic();
};
const activeName = ref("first"); //标签页默认选择项

//tab标签点击处理函数
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="less" scoped>
.params {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
}
</style>
